html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #1ba784;
}
.main-content {
    height: 100vh;
    box-sizing: border-box;
    padding: 3em 0;
}
@media screen and (min-width: 800px) {
    .stock-list {
        width: 22vw;
        margin-left: 3vw;
    }

    .stock-list ul li {
        list-style: none;
        text-align: center;
        width: 2.8vw;
        margin: .5vw;
        cursor: pointer;
        word-wrap: break-word;
        font-size: 1.5vw;
        position: relative;
        height: 9vw;
        padding-top: 1vw;
        float: left;
        color: #ede3e7;
        border-top: .3vw solid #ede3e7;
    }
    .chartWrap {
        width: 60vw;
        height: 40vw;
        position: fixed;
        top: 50%;
        margin-top: -20vw;
        right: 5vw;
    }
    .chart-top {
        position: absolute;
        left: 0;
        top: 1vw;
        z-index: 1;
        width: 100%;
        font-size: 1.3vw;
        line-height: 3vw;
        text-indent: 6vw;
    }
    .chartWrap .chart {
        width: 58vw;
        height: 38vw;
        margin: 1vw;
        background-color: #fff;
    }

    .add-to-list {
        width: 8vw;
        height: 2.5vw;
        text-align: center;
        line-height: 2.5vw;
        border-radius: .3vw;
        background-color: #1ba784;
        font-size: 1.2vw;
        color: #fff;
        position: absolute;
        top: .5vw;
        right: 2vw;
        cursor: pointer;
        text-indent: 0;
    }
}
@media screen and (max-width: 800px) {
    .stock-list {
        width: 100%;
    }

    .stock-list ul li {
        list-style: none;
        text-align: center;
        margin: .5em;
        height: 6em;
        cursor: pointer;
        word-wrap: break-word;
        width: 1.2em;
        font-size: 1em;
        position: relative;
        padding-top: .2em;
        float: left;
        color: #ede3e7;
        border-top: .3vw solid #ede3e7;
    }
    .chartWrap {
        width: 100vw;
        height: 80vw;
        position: relative;
    }
    .chart-top {
        position: absolute;
        left: 0;
        top: .3em;
        z-index: 1;
        width: 100%;
        font-size: 1em;
        line-height: 1.5em;
        text-indent: 6vw;
    }
    .chartWrap .chart {
        width: 100%;
        height: 100%;
        background-color: #fff;
    }

    .add-to-list {
        width: 6em;
        height: 1.6em;
        text-align: center;
        line-height: 1.6em;
        border-radius: .5vw;
        background-color: #1ba784;
        font-size: .9em;
        color: #fff;
        position: absolute;
        top: .3em;
        right: 1em;
        cursor: pointer;
        text-indent: 0;
    }
}
.stock-list ul {
    display: block;
}
.stock-list ul:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    clear: both;
}
.stock-list ul li.active {
    border-color: #ed3333;
    color: #ed3333;
    top: -0.5vw;
    font-weight: bold;
}
.add-to-list.hasAdd {
    background-color: #ee3f4d;
}
.no-result {
    font-size: 1.5em;
    text-align: center;
}

.menu-nav {
    height: 3em;
    width: 400px;
    position: fixed;
    bottom: 0;
    z-index: 99;
    left: 50%;
    margin-left: -200px;
}
.menu-nav > a {
    width: 25%;
    box-sizing: border-box;
    height: 100%;
    float: left;
    text-align: center;
    line-height: 3em;
    background-color: #45b787;
    text-decoration: none;
    color: #501B15;
    display: block;
}
.menu-nav > a:hover {
    background-color: #ee3f4d;
    color: #fff;
}
.menu-nav > a.active {
    background-color: #ee3f4d;
    color: #fff;
}
@media screen and (max-width: 800px){
    .menu-nav {
        width: 100vw;
        margin-left: 0;
        left: 0;
    }
}
